<template>
  <el-form label-position="top"
           :model="data"
           ref="form"
           style="margin: 10px; width: auto"
  >
    <el-form-item prop="qtType" label="* 题型">
      <div class="flex-row-center w_full">

        <el-select @change="selectChanged" size="large" class="w_full" v-model="data.selectQtType"
                   placeholder="题型">
          <el-option
              v-for="(qtType, index) in listQtType"
              :key="index"
              :label="qtType.value"
              :value="qtType.key"
          ></el-option>
        </el-select>
        <score-item style="margin-left: 8px;width: 200px"
                    @update:score="scoreUpdate"
                    :score="data.score"></score-item>
      </div>
    </el-form-item>

    <el-form-item prop="qtTitle" label="* 标题">
      <el-input class="flex_1" size="large" v-model="data.qtTitle"></el-input>

    </el-form-item>

    <el-form-item prop="qtTag" label="* 标签">
      <el-input size="large" v-model="data.userId"></el-input>
    </el-form-item>
    <el-form-item label="选项设置">
      <div style="height: 48px; margin-top: 8px;" class="flex-row-center" v-for="item in listOption">
        <el-checkbox size="large" v-model="item.checked" @change="click_select_option(item)"></el-checkbox>
        <el-input style="height: 48px; width: 300px; margin: 0 0 0 8px;" v-model="item.optionContent"
                  placeholder="选项"></el-input>
        <el-button style="margin-left: 16px" size="small" :icon="Plus" circle @click="btn_click_add(item)"/>
        <el-button style="margin-left: 16px" size="small" :icon="Minus" circle @click="btn_click_remove(item)"/>
        <el-button link class="no_padding" style="margin-left: 16px;" :icon="Top" @click="btn_click_move_up(item)">
          上移
        </el-button>
        <el-button link class="no_padding" style="margin-left: 16px;" :icon="Bottom"
                   @click="btn_click_move_down(item)">下移
        </el-button>
      </div>

    </el-form-item>
    <el-form-item>
      <div class="w_full flex-row-center center-center" style="margin-top: 32px;">
        <el-button size="large" type="primary" @click="handleSubmit">新建</el-button>
        <el-button size="large" @click="handleClose">取消</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>


<script setup lang="ts">
import {reactive, ref} from "vue";
import {IntString} from "@/type/dto/KeyValue";
import {FormInstance} from "element-plus";
import {OptionInfo} from "@/type/optionInfo";
import ScoreItem from "@/components/ScoreItem.vue";
import {Bottom, Minus, Plus, Top} from "@element-plus/icons-vue";
import {QtType_Single, QtType_TrueFalse} from "@/constants/Constants_QtType";
import {QtBankVO} from "@/type/vo/QtBankVO";
import {ExamType_Test} from "@/constants/Constants_ExamType";
import {useUserStore} from "@/store/user";
import {getTimeTick} from "@/utils/TimeUtil";
import {QtItemVO} from "@/type/vo/QtItemVO";
import {api_question_bank_add} from "@/request/apis/qtApi";
import msg from "@/components/msg";
import {ListQtTypeInfo} from "@/constants/Constants_ListQtTypeInfo";

const userStore = useUserStore()

const props = defineProps({
  qbId: {
    type: String,
  },
});
const emit = defineEmits(["close"])
const form = ref<FormInstance>();

const data = reactive({
      userName: '',
      userId: '',
      selectQtType: 0,
      qtTitle: '',
      score: 0,
    }
);

const listQtType = reactive(ListQtTypeInfo);

const listOption = reactive<OptionInfo[]>([
  {
    optionContent: "",
    score: 0,
    checked:false,
  },
  {
    optionContent: "",
    score: 0,
    checked:false,
  }
])

const selectChanged = (value: number) => {
  listOption.length = 0
  for (let i = 0; i < 2; i++) {
    listOption.push({
      optionContent: "",
      score: 0,
      checked:false,
    });
  }

  if (value == QtType_TrueFalse) {
    listOption[0].optionContent = "正确";
    listOption[1].optionContent = "错误";
  }
}

const click_select_option = (opt: OptionInfo) => {
  if (opt.checked) {
    if (data.selectQtType == QtType_Single || data.selectQtType == QtType_TrueFalse) {
      listOption.forEach(x => {
        if (x != opt) {
          x.checked = false;
        }
      })
    }
  }
}
const scoreUpdate = (val: number) => {
  data.score = val;
  console.log('data.score', data.score);
}

const btn_click_add = (optionInfo: OptionInfo) => {
  if (data.selectQtType != QtType_TrueFalse) {
    //找到当前的index
    const index = listOption.indexOf(optionInfo);
    if (index >= 0) {
      listOption.splice(1, 0, {
        optionContent: "",
        score: 0,
        checked:false,
      });
    }
  }
}
const btn_click_remove = (optionInfo: OptionInfo) => {
  if (listOption.length == 0) {
    return;
  }
  if (data.selectQtType != QtType_TrueFalse) {
    //找到当前的index
    const index = listOption.indexOf(optionInfo);
    if (index >= 0) {
      if (index >= 0) {
        listOption.splice(index, 1);
      }
    }
  }
}
//

const btn_click_move_up = (optionInfo: OptionInfo) => {
  if (data.selectQtType != QtType_TrueFalse) {
    //找到当前的index
    const index = listOption.indexOf(optionInfo);
    if (index > 0) {
      listOption.splice(index, 1);
      listOption.splice(index - 1, 0, optionInfo);
    }
  }
}

const btn_click_move_down = (optionInfo: OptionInfo) => {
  if (data.selectQtType != QtType_TrueFalse) {
    //找到当前的index
    const index = listOption.indexOf(optionInfo);
    if (index + 1 < listOption.length) {
      listOption.splice(index, 1);
      listOption.splice(index + 1, 0, optionInfo);
    }
  }
}


const handleClose = () => {
  emit("close", false);
};

const handleSubmit = async () => {
  console.log('data.score', data.score);
  if (!data.qtTitle) {
    await msg.info('请输入题目', '提示');
    return;
  }
  if (!data.selectQtType) {
    await msg.info('请选择题目类型', '提示');
    return;
  }


  if (!listOption || listOption.length == 0) {
    await msg.info('无选项', '提示');
    return;
  }

  //检查选项
  let createDto: QtBankVO = {
    listItemInfo: new Array<QtItemVO>(),
    title: data.qtTitle,
    examType: ExamType_Test,
    qtType: data.selectQtType,
    creatorCode: userStore.userInfo.userId,
    createTime: getTimeTick()
  }

  let score: number = data.score;
  listOption.forEach(item => {
    createDto.listItemInfo.push({
      content: item.optionContent,
      score: item.score,
      orderId: createDto.listItemInfo.length,
      qbId: "",
      qbItemId: "",
      isAnswer:item.checked
    })
    // score += item.score;
  });
  createDto.score = score;
  if (score == 0) {
    await msg.info('请确认分数,当前为0', '提示');
    return;
  }
  let r = await api_question_bank_add(createDto);
  if (!r) {
    await msg.info('数据异常', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常! 创建失败! ${r.code} msg：${r.msg}`, '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  //这里调用api了
  emit("close", true);
}

</script>

<style scoped>
.item .el-form-item__label {
  font-size: 14px;
  font-weight: 400;
  color: #7D8592;
  line-height: 24px;
}
</style>